<template>
  <div class='container'>
      <el-card shadow="never" >
      <el-row>
        <el-col :span="12">
          <span style="font-size:12px;color:pink">说明：目前支持学科和关键字的条件筛选</span>
        </el-col>
        <el-col :span="12">
          <el-row type="flex"
                  justify="end">
            <el-button type="success"
                       icon="el-icon-edit"
                       size="small" @click="addTiaozhuan" >新增试题</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- form表单 -->
      <el-form :inline="true"
               style="margin-top:15px"
               size="small"
               label-width="auto"
               :model="form">
        <el-form-item label="学科">
          <el-select style="width:296.5px"
                     v-model="form.subjectID"
                     @change="subjectListList">
            <el-option v-for="(item,index) in zxhListbz"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select style="width:296.5px"
                     v-model="form.catalogID">
            <el-option v-for="(item,index) in zxhListaka"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select style="width:296.5px"
                     v-model="form.tags">
            <el-option v-for="(item,index) in bqjdList"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input style="width:296.5px"
                    v-model="form.keyword"
                    placeholder="请根据题干搜索" />
        </el-form-item>
        <el-form-item label="试题类型">
          <el-select style="width:296.5px"
                     v-model="form.questionType">
            <el-option v-for="(item,index) in questionType"
                       :key="index"
                       :label="item.label"
                       :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select style="width:296.5px"
                     v-model="form.difficulty">
            <el-option v-for="(item,index) in difficulty"
                       :key="index"
                       :label="item.label"
                       :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select style="width:296.5px"
                     v-model="form.direction">
            <el-option v-for="(item,index) in direction"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select style="width:296.5px"
                     v-model="form.creatorID">
            <el-option v-for="(item,index) in listrs"
                       :key="index"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目备注"
                      v-model="form.remarks">
          <el-input style="width:296.5px" />
        </el-form-item>
        <el-form-item label="企业简称"
                      v-model="form.shortName">
          <el-input style="width:296.5px" />
        </el-form-item>
        <el-form-item label="城市">
          <el-col :span="7">
            <el-select class="filter-item"
                       style="width: 140px;"
                       v-model="form.province"
                       @keyup.enter="handleFilter"
                       @change="shiDaoxian"
                       filterable>
              <el-option v-for="item in citySelect.province"
                         :key="item"
                         :label="item"
                         :value="item"></el-option>
            </el-select>
          </el-col>
          <el-col :span="7"
                  style="margin-left:65px">
            <el-select class="filter-item"
                       style="width: 140px;"
                       v-model="form.city"
                       @keyup.enter="handleFilter"
                       filterable>
              <el-option v-for="item in  citySelect.cityDate"
                         :key="item"
                         :label="item"
                         :value="item"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-row type="flex"
                  justify="end"
                  style="width:315px">
            <el-col :span="29">
              <el-button @click="qingkongAnniu">清除</el-button>
              <el-button type="primary"
                         @click="sousuoAnniu">搜索</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
   <!-- 切换标签页 -->
      <el-tabs v-model="activeName"
               type="card"
               @tab-click="tabQiehuan">
        <el-tab-pane label="全部"
                     name="all">
        </el-tab-pane>
        <el-tab-pane label="待审核"
                     name="0">
        </el-tab-pane>
        <el-tab-pane label="已审核"
                     name="1">
        </el-tab-pane>
        <el-tab-pane label="已拒绝"
                     name="2">
        </el-tab-pane>
      </el-tabs>
      <!--数据条数  -->
      <el-alert :title='alertText'
                v-if="alertText !==''"
                type="info"
                show-icon>
      </el-alert>
      <!-- 表格 -->
      <el-table :data="lists"
                style="width: 100%;margin-top:15px"
                :header-cell-style="{background:'#fafafa',color:'#606266'}">
        <el-table-column label="试题编号"
                         prop="number"
                         width="130px">
        </el-table-column>
        <el-table-column label="学科"
                         prop="subject"
                         width="140px">
        </el-table-column>
        <el-table-column label="目录"
                         prop="catalog"
                         width="140px">
        </el-table-column>
        <el-table-column label="题型"
                         width="140px">
          <template v-slot="{row}">
            <span v-if="row.questionType === '1'">单选</span>
            <span v-else-if="row.questionType === '2'">多选</span>
            <span v-else-if="row.questionType === '3'">简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题干"
                         width="310px">
          <template v-slot="{row}">
            <span v-html="row.question"></span>
          </template>
        </el-table-column>
        <el-table-column label="录入时间"
                         width="150px">
          <template v-slot="{row}">
            <span>{{row.addDate | parseTime}}</span>
          </template>
        </el-table-column>
        <el-table-column label="难度"
                         prop="difficulty"
                         width="140px">
          <template v-slot="{row}">
            <span v-if="row.difficulty === '1'">简单</span>
            <span v-else-if="row.difficulty === '2'">一般</span>
            <span v-else-if="row.difficulty === '3'">困难</span>
          </template>
        </el-table-column>
        <el-table-column prop="creator"
                         label="录入人"
                         width="120">
        </el-table-column>
        <el-table-column label="审核状态"
                         width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.chkState===0">待审核</span>
            <span v-else-if="scope.row.chkState===1">通过</span>
            <span v-else-if="scope.row.chkState===2">拒绝</span>
          </template>
        </el-table-column>
        <el-table-column prop="chkRemarks"
                         label="审核意见"
                         width="120">
        </el-table-column>
        <el-table-column prop="chkUser"
                         label="审核人"
                         width="120">
        </el-table-column>
        <el-table-column label="发布状态"
                         width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.publishState === 1">已发布</span>
            <span v-else-if="scope.row.chkState === 1">已下架</span>
            <span v-else>待发布</span>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         fixed="right"
                         width="200px">
          <template v-slot="{row}">
            <el-button @click="hPreview(row.id)"
                       type="text"
                       size="small">预览</el-button>
            <el-button @click="shengHe(row.id)"
                       type="text"
                       size="small"
                       :disabled="row.chkState ? true : false">审核</el-button>
            <el-button @click="hChange(row.id)"
                       type="text"
                       size="small"
                       :disabled="row.publishState ? true : false">修改</el-button>
            <el-button @click="shangJia(row)"
                       type="text"
                       size="small">{{row.publishState === 0 ? '上架' : '下架'}}</el-button>
            <el-button @click="deleteElem(row)"
                       type="text"
                       size="small"
                       :disabled='row.publishState? true:false'>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex"
              justify="end"
              style="margin-top:15px">
        <el-pagination @size-change="handleSizeChange"
                       background
                       @current-change="qiehuanYema"
                       :page-sizes="[5, 10, 20, 50]"
                       :page-size="page.pagesize"
                       layout="prev, pager, next, sizes, jumper"
                       :total="page.total">
        </el-pagination>
      </el-row>
    </el-card>
    <!-- 预览 -->
    <questions-preview :question-item="questionItem" :dialog-visible="dialogVisible" @close="dialogVisible = false"></questions-preview>
    <!--审核框-->
    <el-dialog title="题目审核"
               :visible.sync="dialogFormVisible"
               width="25%">
      <el-form :model="form">
        <el-form-item>
          <el-radio v-model="form.chkState"
                    label="1">通过</el-radio>
          <el-radio v-model="form.chkState"
                    label="2">拒绝</el-radio>
        </el-form-item>
        <el-form-item>
          <el-input type="textarea"
                    :rows="3"
                    placeholder="请输入审核意见"
                    resize=none
                    v-model="form.chkRemarks"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="shengHequeding">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import questionsPreview from './questions-preview'
// 题库
import { choice, remove, detail, choiceCheck, choicePublish } from '@/api/hmmm/questions.js'
// 学科d
import { subjectsList } from '@/api/hmmm/subjects.js'
// 标签
import { tagsList as arrs } from '@/api/hmmm/tags.js'
// 映射
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
// 用户列表
import { list } from '@/api/base/users.js'
// 目录
import { list as lis } from '@/api/hmmm/directorys.js'
// 城市
import { provinces, citys } from '@/api/hmmm/citys.js'
export default {
  data () {
    return {
      questionItem: {},
      activeName: 'all',
      lists: [], // 精选题库数据
      currentPage: 2,
      page: {
        page: 1, // 当前页数
        pagesize: 5, // 页面显示条数
        total: 0
      },
      zxhList: [], // 学科简单数据
      zxhListbz: [], // 保存学科目录数据
      zxhListaka: [], // 获取目录数据列表数据
      bqjdList: [], // 标签简单数据
      listrs: [], // 录入人
      questionType: questionType,
      difficulty: difficulty,
      direction: direction,
      State: null,
      form: {
        subjectID: null, // 学科
        catalogID: '', // 二级目录
        difficulty: '', // 难度
        questionType: '', // 试题类型
        tags: '', // 标签
        province: '', // 省份
        city: '', // 城市
        keyword: null, // 关键字
        remarks: '', // 题目备注
        enterpriseID: '',
        shortName: '', // 企业简称
        direction: '', // 方向
        creatorID: '', // 录入人
        chkState: '', // 审核状态
        chkRemarks: '' // 审核意见
      },
      // 城市
      citySelect: {
        province: [],
        cityDate: []
      },
      alertText: '',
      dialogVisible: false, // 弹层按钮
      isShow: false, // 视频按钮
      radio: 1, // 双向绑定单选框
      isLoading: false, // loding状态
      checkList: [], // 保存多选的选项
      previewData: {}, // 当点击预览按钮时获取当前行的数据
      dialogFormVisible: false, // 控制修改弹层
      checkId: '', // 审核id
      previewId: '' // 预览id
    }
  },
  components: { questionsPreview },
  created () {
    this.choice() // 请求精选题库数据
    this.subjectsList() // 获取学科列表
    this.list()// 获取用户信息
    this.huoquXian() // 获取县
  },

  methods: {
    // 请求基础题库列表数据
    async choice () {
      // 需要搜索的数据
      const query = {
        page: this.page.page,
        pagesize: this.page.pagesize,
        chkState: this.State,
        subjectID: this.form.subjectID,
        keyword: this.form.keyword
      }
      const { data } = await choice(query)
      // console.log(data)
      this.lists = data.items
      this.page.total = data.counts
      this.alertText = `数据一共 ${data.counts} 条`
    },
    // 点击分几页
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.page.pagesize = val
      // 更新数据
      this.choice()
    },
    // 点击切换页码
    qiehuanYema (val) {
      // console.log(`当前页: ${val}`)
      this.page.page = val
      // 更新数据
      this.choice()
    },
    // 学科列表
    async subjectsList () {
      const { data } = await subjectsList()
      this.zxhList = data.items
      console.log(this.zxhList)
      this.zxhList.forEach((item) => { this.zxhListbz.push(item.subjectName) })
    },
    // 获取用户信息
    async list () {
      const { data } = await list()
      data.list.forEach((item) => {
        this.listrs.push(item.username)
      })
    },
    // 获取县
    huoquXian: function () {
      this.citySelect.province = provinces()
    },
    // 选市获取到县
    shiDaoxian: function (e) {
      this.citySelect.cityDate = citys(e)
      this.form.city = []
    },
    // 表单联机
    subjectListList (e) {
      this.zxhListaka = [] // 清空数组
      this.form.catalogID = '' // 清空选框里面的数据
      this.zxhList.forEach(async (item) => {
        if (item.subjectName === e) {
          const { data } = await lis()
          data.items.forEach((key) => {
            if (key.subjectID === item.id) {
              this.zxhListaka.push(key.directoryName)
            }
          })
          const arr = await arrs()
          console.log(item.subjectName)
          arr.data.items.forEach((arrs) => {
            console.log(arrs.subjectName)
            if (item.subjectName === arrs.subjectName) {
              this.bqjdList.push(arrs.tagName)
            }
          })
        }
      })
    },
    // 清空按钮
    qingkongAnniu () {
      this.form = {
        subjectID: null,
        catalogID: '',
        tags: '',
        keyword: null,
        questionType: '',
        difficulty: '',
        direction: '',
        creatorID: '',
        remarks: '',
        shortName: '',
        province: '',
        city: ''
      }
      // 调用更新数据
      this.choice()
    },
    // 搜索按钮
    async sousuoAnniu () {
      this.page.page = 1
      this.choice()
    },
    // tab栏切换
    tabQiehuan (tab, event) {
      if (this.activeName === 'all') {
        this.State = null
        this.choice()
      } else {
        this.State = Number(this.activeName)
        this.page.page = 1
        this.choice()
      }
    },
    // 删除
    async deleteElem (data) {
      try {
        await this.$confirm('此操作将永久删除,', '提示')
        // 调用接口
        await remove(data)

        this.choice()

        this.$message.success('删除员工成功')
      } catch (err) {
        console.log(err)
      }
    },
    // // 预览
    async hPreview (id) {
      // 获取 题库详情
      const { data: res } = await detail({ id: id })
      this.previewData = res
      this.dialogVisible = true // 打开弹层
      // this.questionItem =  弹出层里面赋值
    },

    hPrevent (e) {
      e.preventDefault()
    },
    // 审核
    shengHe (id) {
      // 打开弹层
      this.dialogFormVisible = true
      // 将id存储
      this.checkId = id
    },
    // 点击审核确定按钮
    async shengHequeding () {
      // 点击确定前判断输入框是否有内容
      if (this.form.chkRemarks === '' || this.form.chkState === '') {
        return this.$message.warning('请输入审核意见')
      }
      this.dialogFormVisible = false
      const id = this.checkId // 在审核保存的id拿下来
      try {
        // 获取参数
        const arr = {
          id,
          chkState: Number(this.form.chkState), // 将字符串转化成数字
          chkRemarks: this.form.chkRemarks
        }
        // 调用接口
        await choiceCheck(arr)
        // 提示
        this.$message.success('操作成功')
        // 重新加载列表
        this.choice()
      } catch (err) {
        console.log(err)
      }
    },
    // 视频mp4没链接的时候  就不显示
    hvideoShow (url) {
      if (url !== '') {
        this.isShow = !this.isShow
      }
    },
    // 修改
    hChange (id) {
      this.$router.push({
        path: 'new',
        query: {
          id
        }
      })
    },
    // 上架
    shangJia (data) {
      this.$confirm(`你确定${data.publishState === 0 ? '下架' : '上架'}这道题吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // if发判断是否通过审核
          if (data.chkState === 1) {
            // 通过审核  调用接口
            await choicePublish({ id: data.id, publishState: data.publishState === 0 ? 1 : 0 })
            // 更新视图
            this.choice()
            // 提示用户
            this.$message.success(`${data.publishState === 0 ? '下架' : '上架'}成功`)
          } else {
            // 没审核得拦截
            this.$message.warning('请先通过审核')
          }
        } catch (err) {
          console.log(err)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        })
      })
    },
    // 预览关闭按钮
    btn () {
      this.dialogVisible = false
      this.isShow = false
    },
    // 新增试题  跳转页面
    addTiaozhuan () {
      this.$router.push('/questions/new')
    }
  }
}

</script>

<style scoped lang='scss'>
.yiban{
width: 100px;
}
</style>
